<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import {  Prize } from '../types'
import { SelectOption } from 'vuestic-ui'

const props = defineProps<{
  prize: Prize | null
  saveButtonLabel: string
}>()

defineEmits<{
  (event: 'save', prize: Prize): void
  (event: 'close'): void
}>()

const newPrize = ref({} as Prize)

const required = (v: string | SelectOption) => !!v || 'This field is required'

const ownerFiltersSearch = ref('')
const teamFiltersSearch = ref('')
</script>

<template>
  <VaForm v-slot="{ validate }" class="flex flex-col gap-2">
    <VaInput v-model="newPrize.prizeName" label="Prize name" :rules="[required]" />

    <VaSelect
      v-model="newPrize.prizeType"
      label="Prize Type"
      :rules="[required]"
      track-by="value"
      value-by="value"
      :options="[
        { text: 'Cash', value: '1' },
        { text: 'Coupon', value: '2' },
        { text: 'Product', value: '3' },
        { text: 'Service', value: '4' },
      ]"
    />
    <VaInput v-model="newPrize.description" label="description" :rules="[required]" />

    <VaInput v-model="newPrize.prizeQuantity" type="number" label="Prize Quantity" :rules="[required]" />

    <div class="flex justify-end flex-col-reverse sm:flex-row mt-4 gap-2">
      <VaButton preset="secondary" color="secondary" @click="$emit('close')">Cancel</VaButton>
      <VaButton @click="validate() && $emit('save', newPrize as Prize)">{{ saveButtonLabel }}</VaButton>
    </div>
  </VaForm>
</template>

<style lang="scss" scoped>
.va-select-content__autocomplete {
  flex: 1;
}

.va-input-wrapper__text {
  gap: 0.2rem;
}
</style>
